<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script>
    var Book = {} 
    var val = ''
    // 通过 Object.defineProperty 劫持对象的属性
    Object.defineProperty(Book,'name',{ // 要劫持监听的是哪个对象 / 对象的哪个属性 / 对象的setter和getter方法
      get () {
        val = '《' + val + '》'
        return val
      },
      set (value) { // value参数是输入的值
        val = value
      }
    })
    Book.name = 'vue入门教程'
    console.log(Book.name) // 输出结果为：《vue入门教程》
    // 如果上面没写Object.defineProperty：Book 对象没有set和get方法。写了之后，Book 对象就有set和get方法
    console.log(Book) // 也就是说对象本身是没有get 和set方法的，通过Object.defineProperty数据劫持就拥有了set和get方法
    var obj = {name:'张三'}
    console.log(obj) // {name: "张三"} 没有get和set方法
</script>
</html>